<template>
	<div class="Hot">
		<Head></Head>
		<!-- 热歌榜图片 -->
		<div class="rg_banner">
			<div class="rg_bannerpic">

			</div>
			<div class="rg_bannerfont">
				<p>更新日期：11月19日</p>
			</div>
		</div>
		<!-- 热歌榜列表 -->
		<div style="margin-left: .3rem;">
			<ul style="height: 10rem;margin-left: .2rem;margin-right: .2rem">
				<li v-for="(article,index) in articles" style="height: 1.5rem;" :key='article.id'>
					<span style="color:#999;font-size:17px;" :class="{'bg':index<3}">{{index = (index+1) < 10 ? "0"+(index+1):(index+1)}}</span>
					<router-link :to="article.url">
					<a v-bind:href="article.url" style="color:#333;font-size: 0.414634rem;text-align:left;">
						{{article.title}}
					</a>
					</router-link>
					<p style="color:gray;text-align:left;margin-top:0.073171rem;margin-left:0.643902rem;"><span class="SQicon"></span>
						{{article.content}}</p>
					<span style="float:right;margin-top: -1rem;">
						<van-icon name="play-circle-o" color="gray" size=".8rem" />
					</span>
				</li>
			</ul>
		</div>
	</div>
	<!-- 上面绑定class也可以写成:class="[index<3?'bg':'']" -->



	
	</div>
</template>

<script>
	import Head from './Head.vue';
	
	
	export default {
		name: 'Hot',
		
		props: {
			msg: String
		},
		data() {
			return {
				tabcontent: ['推荐音乐', '热歌榜', '搜索'],
				info: true,
				texts: ['推荐音乐', '热歌榜', '搜索'],
				articles: [{
						"title": "谁(Live版)",
						"url": "/musicplay",
						"content": "廖俊涛 - 谁(Live版)"
					},
					{
						"title": "我很好（吉他版）",
						"url": "https://www.runoob.com/html/html-tutorial.html",
						"content": "刘大壮 - 我很好（吉他版）"
					},
					{
						"title": "执迷不悟",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "鱿籽酱 - 执迷不悟"
					},
					{
						"title": "海底",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "一只榴莲 - 《独》"
					},
					{
						"title": "他只是经过",
						"url": "https://www.runoob.com/sql/sql-tutorial.html",
						"content": "h3R3 / Felix Bennett - 他只是经过"
					},
					{
						"title": "经济舱（Live）",
						"url": "https://www.runoob.com/css/css-tutorial.html",
						"content": "Kafe.Hu - 中国新说唱2020 第十期"
					},
					{
						"title": "如果当时2020（不曾遗忘的符号）",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "许嵩/朱婷婷 - 如果当时2020"
					},
					{
						"title": "是想你的声音啊（你快听 滴答滴）",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "傲七爷 - 是想你的声音啊"
					},
					{
						"title": "天外来物",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "薛之谦 - 天外来物"
					},
					{
						"title": "囍（Chinese Wedding）",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "葛东琪 - 囍（Chinese Wedding）"
					},
					{
						"title": "还是分开",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "张叶蕾 - 还是分开"
					},
					{
						"title": "苦尽甘来",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "翁梓铭 - 感知"
					},
					{
						"title": "永不失联的爱",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "周兴哲 - 如果雨之后"
					},
					{
						"title": "游京",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "海伦 - 游京"
					},
					{
						"title": "Love Is Gone (feat. Dylan Matthew)...",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "SLANDER / Dylan Matthew - Love Is Gone (Acou..."
					},
					{
						"title": "偏爱",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "Lil Ghost小鬼 - 偏爱"
					},
					{
						"title": "会不会（正式版）",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "刘大壮 - 会不会"
					},
					{
						"title": "经济舱（'Vol.Flightin'）",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "KEY.L刘聪 / Kafe.Hu"
					},
					{
						"title": "世间美好与你环环相扣",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "松柏 - 听闻余生"
					},
					{
						"title": "把回忆拼好给你",
						"url": "https://www.runoob.com/css3/css3-tutorial.html",
						"content": "王贰浪 - 把回忆拼好给你"
					},

				],

			}
		},
		components: {
			Head
		},




	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	.Hot{
		background-color: #fff;
		height: 20rem;
		width: 100%;
	}
	.rg_logo {
		width: 100%;
		height: 84px;
		background-color: #d43c33;
	}

	.bg {
		color: #df3436 !important;
	}

	.rg_logoicon {
		width: 3.963415rem;
		height: 0.909756rem;
		background: url('../assets/img/rglogo.png') no-repeat;
		background-size: cover;
		margin-left: 0.243902rem;
	}

	.rg_btn {
		color: #d43c33;
		background-color: #fff;
		border: 0;

	}

	.rg_changebtn {
		width: 30.333%;
	}

	.rg_changebtn>>>.van-button {
		height: 0.97561rem;
	}

	.rg_changebtn>>>.van-button--normal {
		padding: 0 17px;
	}

	.rg_changebtn>>>.van-button--normal {
		font-size: 16px;
	}

	.rg_banner {
		position: relative;
		width: 100%;
		height: 3.536585rem;
		background: url('../assets/img/rgbg2.jpg') no-repeat;
		background-size: cover;
		overflow: hidden;
	}

	.rg_bannerpic {
		position: absolute;
		width: 3.463415rem;
		height: 1.634146rem;
		background: url('../assets/img/rgbg1.png') no-repeat -18px -24px;
		background-size: cover;
		top: 20%;
		left: 6%;
	}

	.rg_bannerfont {
		position: absolute;
		top: 70%;
		left: 6%;
	}

	.rg_bannerfont p {
		color: hsla(0, 0%, 100%, .8);
	}

	.SQicon {
		display: inline-block;
		width: 0.390244rem;
		height: 0.243902rem;
		background: url('../assets/img/rgbg1.png') no-repeat 0px 0px;
		background-size: 191px auto;
		margin-right: 0.097561rem;
	}
</style>
